第二十三天--刪除留言與成果展現

2023 iThome 鐵人賽

DAY 23

自我挑戰組

基礎前端+後端網站分享之留言板製作系列第 23 篇

15th鐵人賽

aliecele

2023-10-07 10:03:55

299 瀏覽

分享至

今天來介紹刪除留言與成果展現

今天先講解畫面，再來講解原理。

畫面
Home.php程式碼

<!DOCTYPE html>
<html lang="en">
<?php
include("../php/datatable.php");
$comments = getAllComments();
?>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
    <title>留言板</title>
</head>

<body>
    <ul class="nav nav-tabs justify-content-center">
        <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="Home.php">留言板</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="register.php">註冊</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="../php/sign_out.php">登出</a>
        </li>
    </ul>

    <div class="mb-5 pb-5">
        <h1 class="text-center">留言板</h1>

        <div class="mx-5 mt-5">
            <form method="POST" action="../php/create_comment.php">
                <div class="">
                    <div class="input-group-prepend">
                        <span class="input-group-text text-light bg-dark">暱稱: </span>
                    </div>
                    <textarea class="form-control" name="user_name" required="required" cols="40" rows="1"></textarea>
                </div>
                <div class="">
                    <div class="input-group-prepend">
                        <span class="input-group-text text-light bg-dark">評論: </span>
                    </div>
                    <textarea class="form-control" name="comment" required="required" cols="40" rows="5" placeholder="輸入評論"></textarea>
                </div>
                <input type="hidden" name="id" value="id">
                <input type="submit" name="submit" class="btn btn-dark" value="新增資料" style="float:left">
            </form>



        </div>

    </div>

    <div>
        <h2 class="mt-4 text-center">留言:</h2>
        <?php
        // echo var_dump($comments);
        foreach ($comments as $row) {
        ?>
            <div class="mx-3 my-3">
                <h5 class="mx-3 mt-2"><?php echo $row["name"]; ?></h5>
                <p class="mx-3"><?php echo $row["comment"]; ?></p>

                <div>
                    <a href="../php/edit_comment.php?id=<?php echo $row['id'] ?>">
                        <input type="submit" value="修改" class="btn btn-dark mx-3" style="float:right">
                    </a>
                    <form method="POST" action="../php/delete_comment.php">
                        <input type="hidden" name="id" value="<?php echo $row['id'] ?>">
                        <input type="submit" value="刪除" class="btn btn-danger" style="float:right">
                    </form>


                </div>

            </div>
        <?php
        }
        ?>
    </div>
</body>

</html>

主要是這部分的form重要。

<form method="POST" action="../php/delete_comment.php">
    <input type="hidden" name="id" value="<?php echo $row['id'] ?>">
    <input type="submit" value="刪除" class="btn btn-danger" style="float:right">
</form>

利用input隱藏自己的數值，也就是文章的id，利用form用Post去傳遞到delete_comment.php，再藉由引用datatable.php來使用裡面的deleteComment函式，接下來一一呈現程式碼。

我們先新建delete_comment.php在php文件夾。
delete_comment.php程式碼

<?php

include("datatable.php");
$id = $_POST['id'];
$statement = deleteComment($id);
header('Location:/30days/message_board/screen/Home.php');

$_POST['id']就是資料庫的，如圖所示

也是透過Home.php程式碼的input type="hidden" name="id" value=""過來的，用id來找對留言。

新增deleteComment函式在datatable.php檔裡
datatable.php程式碼

function deleteComment($id)
{
    $db = dbConnect();
    $statement = $db->prepare("DELETE FROM messageboard WHERE id= ?");
    $statement->execute([$id]);
    return $statement;
}

再來透過DELETE FROM messageboard WHERE id= ?從資料庫找留言。

這裡的WHERE用法介紹下，Where語法是能篩選資料的語法，能用在SELECT(選擇)、INSERT INTO(新增)、UPDATE(更新)和DELETE (刪除)等語法。
小心別再使用DELETE (刪除)時還沒加WHERE，這會導致資料庫的資料全部不見。

提醒下如果當你完成刪除留言時，會有一種正常情況。
當你刪除其中一個留言時，資料庫的id編號就不會在遞增呈現，如圖所示

3之後直接跳到7，代表我刪除了4、5和6的留言過，這是正常的。